<template>
  <el-scrollbar style="height:500px">
    <el-row :gutter="20">
      <el-col :span="7">
        <elForm
          v-model="findBaseModel"
          v-bind="findBaseProps"
        />
      </el-col>
      <el-col :span="13">
        查询
        <elFind
          v-model="query"
          v-bind="findProps"
        />
      </el-col>
      <el-col :span="4">
        query：<br>
        <div v-for="(item, key, index) in query" :key="index">
          {{key}}: {{item}}
        </div>
        <el-scrollbar style="height:500px">
          <jsonformat :json="findProps" />
        </el-scrollbar>
      </el-col>
    </el-row>
  </el-scrollbar>
</template>

<script>
import { reactive, watch } from 'vue'
import VueDS from 'vue-data-state'

</script>

<script setup>
import elFind from '/ctrl/nf-el-find/el-find-div.vue'
import elForm from '/ctrl/nf-el-form/el-form-div.vue'
import jsonformat from '../json-format/json-format.vue'

// 表单控件的 base 的json
import jsonFindBase from '../json/meta-find-base.json'

// 程序功能
// 表单控件的基础属性
const findBaseModel = reactive({
  'label-width': 100,
  'finditem-width': 300,
  customerDefault: 100,
  quickFind: [],
  allFind: []
})
const findBaseProps = reactive(jsonFindBase.formMeta)

// ==============

// 查询的 model
const query = reactive({})

// 定义查询的 meta
const findProps = reactive({
  quickFind: [],
  allFind: [],
  customer: {},
  findKind: {},
  itemMeta: {},
  reload: false
})

// 状态
const { reg, get } = VueDS.useStore()
const helpDataBaseMeta = get.helpDataBaseMeta()

// 表的model
const modelTable = helpDataBaseMeta.tableMeta
// 字段的 model 数据列表
const modelColumList = helpDataBaseMeta.columnListMeta

// 根据数据设置表单需要的meta
const setFindMeta = () => {
  for (const key in modelColumList) {
    const item = modelColumList[key]
    // console.log(key, item)
    const colId = parseInt(item.columnId)
    // 添加 quickFind
    if (!findProps.quickFind.includes(colId)){
      if (findProps.quickFind.length < 5){
        findProps.quickFind.push(colId)
      }
    }
    if (!findBaseModel.quickFind.includes(colId)){
      findBaseModel.quickFind.push(colId)
    }
    // 添加 allFind
    if (!findProps.allFind.includes(colId)){
      findProps.allFind.push(colId)
    }
    if (!findBaseModel.allFind.includes(colId)){
      findBaseModel.allFind.push(colId)
    }
    // 添加 itemMeta
    findProps.itemMeta[colId] = {
      controlId: colId,
      colName: item.colName,
      label: item.cnName,
      controlType: item.controlType,
      defValue: '',
      placeholder: item.cnName,
      title: item.cnName
    }
    // 根据字段类型，设置默认值

    // 设置 表单控件基础属性的 显示字段
    const options = findBaseProps.itemMeta['1008000'].optionList
    if (options.filter((a) => a.value === colId).length === 0){
      options.push({
        value: colId,
        label: item.cnName
      })
    }
    findBaseProps.itemMeta['1008010'].optionList = options
  }
  findProps.reload = !findProps.reload
}

// 监听字段
watch(() => modelColumList, ()=> {
  setFindMeta()
},{deep:true})

// 监听列表自己的属性
watch(() => findBaseModel, () => {
  Object.assign(findProps, findBaseModel)
  findProps.reload = !findProps.reload
},
{deep:true})

</script>
